<script>
import { navList } from '@/api/constant'
export default {
  name: 'NavPage',
  data () {
    return {
      showSearch: false,
      navList
    }
  },
  watch: {
    '$route.path': {
      handler (v) {
        window.document.documentElement.scrollTop = 0
      },
      deep: true
    }
  }
}
</script>

<template>
  <div class="nav-page">
    <div class="nav">
      <div class="logo"></div>
      <ul class="list">
        <li
          class="nav-item"
          v-for="item in navList"
          :key="item.text"
          :class="{ active: $route.path.includes(item.link) }"
          @click.stop="$router.push(item.link)"
        >
          <span>{{ item.text }}</span>
          <ul class="menu" v-if="item.children.length">
            <li
              class="item"
              v-for="child in item.children"
              :key="child.text"
              @click.stop="child.link && $router.push(child.link)"
            >
              <img v-if="child.icon" :src="child.icon" alt="" />
              <span>{{ child.text }}</span>
              <i class="icon">
                <img :src="$url + '/icon/right-white.png'" alt="" />
              </i>
              <ul
                class="sub-menu"
                v-if="item.children.length || child.children.length"
              >
                <li
                  class="item"
                  v-for="sub in child.children"
                  :key="sub.text"
                  @click.stop="sub.link && $router.push(sub.link)"
                >
                  <span>{{ sub.text }}</span>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>

    <router-view></router-view>

    <div class="foot">
      <div class="w">
        <div class="us">
          <div class="logo"></div>
          <div class="info">
            <p rq-global="foot_email" global-type="code">
              电子邮箱：contact@yuhuachina.com
            </p>
            <p rq-global="foot_address" global-type="code">
              地 址：中国湖北省武汉市江夏区阳光大道25号
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.nav-page {
  .nav {
    height: 120px;
    padding: 0 200px;
    background-color: var(--primary_color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    .logo {
      width: var(--logo_width);
      height: var(--logo_height);
      background: url(@/assets/logo-blue.png) 0px 0px / 100% auto no-repeat;
    }
    .list {
      display: flex;
      height: 120px;
      .nav-item {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        & > span {
          padding: 0 40px;
        }
        span {
          color: #fff;
          font-size: 22px;
        }
        .menu {
          position: absolute;
          left: 0;
          top: 120px;
          padding-top: 20px;
          background-color: #414099;
          display: none;
          z-index: 99;
          .item {
            box-sizing: border-box;
            width: 260px;
            padding: 0 30px;
            height: 70px;
            position: relative;
            display: flex;
            align-items: center;
            > img {
              width: 48px;
              height: 48px;
              display: block;
            }
            .sub-menu {
              position: absolute;
              background-color: #414099;
              top: 0;
              left: 260px;
              display: none;
              .item {
                justify-content: center;
                &:hover {
                  cursor: pointer;
                  background-color: #6f6edf;
                }
              }
            }
          }

          & > .item {
            justify-content: space-between;
            .iconfont {
              font-size: 22px;
              color: #fff;
              visibility: hidden;
            }
            &:hover {
              cursor: pointer;
              background-color: #6f6edf;
              .iconfont {
                visibility: visible;
              }
              .sub-menu {
                display: block;
              }
            }
          }
        }

        &::after {
          content: "";
          position: absolute;
          width: 20px;
          height: 2px;
          background-color: #fff;
          bottom: 20px;
          left: 50%;
          transform: translateX(-50%);
          display: none;
        }

        &:hover {
          cursor: pointer;
          .menu {
            display: block;
          }
        }

        &:hover,
        &.active {
          &::after {
            display: block;
          }
          background-color: #6f6edf;
        }
      }
    }
    .other {
      display: flex;
      align-items: center;
      position: relative;
      height: 120px;
      .change {
        display: flex;
        margin-right: 30px;
        .item {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          text-align: center;
          line-height: 40px;
          margin-right: 10px;
          font-size: 16px;
          border: 1px solid #fff;
          color: #fff;
          &.on {
            background-color: #fff;
            color: #414099;
          }
          &:hover {
            cursor: pointer;
          }
        }
      }
      .search {
        font-size: 30px;
        color: #fff;
        &:hover {
          cursor: pointer;
        }
      }

      .search-ipt {
        position: absolute;
        right: 0;
        top: 120px;
        margin-top: 5px;
        z-index: 10;
        input {
          display: block;
          box-sizing: border-box;
          padding-left: 15px;
          width: 300px;
          height: 44px;
          border: 0 none;
          border-radius: 10px;
          box-shadow: 0px 0px 3px -1px rgba(0, 0, 0, 0.4);
          background-color: #fff;
          &:focus {
            outline: 0 none;
          }
        }
        .icon {
          position: absolute;
          top: 50%;
          right: 10px;
          transform: translateY(-50%);
          font-size: 22px;
          color: #222695;
        }
      }
    }
  }

  .foot {
    padding-bottom: 20px;
    background: url(http://www.yuhuachina.com/Temp/PC/images/img05.png) left top /
      100% 100% no-repeat;
    .w {
      width: 1200px;
      margin: 0 auto;
      padding-top: 40px;
      .us {
        color: #fff;
        margin-top: 60px;
        .logo {
          width: var(--logo_width);
          height: var(--logo_height);
          background: url(@/assets/logo.png) 0 0 / 100% no-repeat;
        }
        .info {
          margin-top: 10px;
          font-size: 14px;
          line-height: 32px;
        }
      }
    }
  }
}
</style>
